<template>
  <div class="page-container-padding">
    <div>
      <span>
        <el-date-picker
          v-model="dateRange"
          style="width: 220px"
          type="daterange"
          size="mini"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :clearable="false"
        ></el-date-picker>
      </span>
      <span style="margin-left: 6px">
        <el-button
          type="primary"
          size="mini"
          :loading="dataLoading"
          @click="dateRangeQuery"
        >
          统计
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="success" size="mini" @click="currentMonthQuery">
          计本月
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="preMonthQuery">
          上一月
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="nextMonthQuery">
          下一月
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="yearQuery">全年</el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="preYearQuery">
          上一年
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="nextYearQuery">
          下一年
        </el-button>
      </span>
    </div>
    <div style="margin-top: 16px">
      <div>协同服务各模块统计表</div>
      <div>
        <el-table border stripe :data="statisticsData">
          <el-table-column
            type="index"
            width="50"
            label="序号"
          ></el-table-column>
          <el-table-column label="项目" align="center" width="150">
            <template #default="scope">
              <span class="module-name" @click="toStatisticsDetail(scope.row)">
                {{ scope.row.coordinate_name }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="total_count"
            label="申请数量"
            align="right"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="total_quota"
            label="申请瑞币"
            align="right"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="finish_count"
            label="完成数量"
            align="right"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="finish_quota"
            label="完成瑞币"
            align="right"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="doing_count"
            label="进行中数量"
            align="right"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="doing_quota"
            label="进行中瑞币"
            align="right"
            width="150"
          ></el-table-column>
        </el-table>
        <div style="color: #d2473e; font-size: 12px; line-height: 26px">注意：被拒绝的记录不在统计范围内。</div>
      </div>
    </div>
    <!-- 明细表 -->
    <div style="margin-top: 16px">
      <div>{{ currentName }}记录明细</div>
      <div>
        <el-table border stripe :data="currentDetail">
          <el-table-column label="类型" prop="coordinate_name" width="160px" />
          <el-table-column label="申请时间" prop="create_time"></el-table-column>
          <el-table-column label="名称" prop="coordinate_title"></el-table-column>
          <el-table-column label="服务人员" prop="work_name"></el-table-column>
          <el-table-column label="服务时间" prop="finish_time"></el-table-column>
          <el-table-column label="状态" prop="state_text"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    getMonthDatePoint,
    getYearDatePoint,
    datetimeToStr,
  } from '@/utils/datetimeUtils'
  import { StateCoordination } from '@/api/departmentWork/coordination'
  export default {
    data() {
      return {
        dateRange: [],
        dataLoading: false,
        statisticsData: [],
        currentName: '',
        currentDetail: [],
      }
    },
    mounted() {
      this.setCurrentDates()
      this.queryPageData()
    },
    methods: {
      setCurrentDates() {
        let flag = new Date().getDate() < 4 ? 'previous' : 'current'
        this.dateRange = getMonthDatePoint(new Date(), flag)
      },
      queryPageData() {
        this.currentDetail = []
        const params = {
          start: datetimeToStr(this.dateRange[0], true, '-'),
          end: datetimeToStr(this.dateRange[1], true, '-'),
        }
        StateCoordination(params.start, params.end).then((res) => {
          this.statisticsData = res.data
        })
      },

      toStatisticsDetail(module) {
        this.currentName = module.coordinate_name
        this.currentDetail = module.details
      },

      // 指定日期范围查询
      dateRangeQuery() {
        this.queryPageData()
      },

      // 本月查询
      currentMonthQuery() {
        this.dateRange = getMonthDatePoint(new Date(), 'current')  // 当前月份
        this.queryPageData()
      },

      // 上一月查询
      preMonthQuery() {
        this.dateRange = getMonthDatePoint(this.dateRange[0], 'previous')
        this.queryPageData()
      },

      // 下一月查询
      nextMonthQuery() {
        this.dateRange = getMonthDatePoint(this.dateRange[0], 'next')
        this.queryPageData()
      },

      // 当前月份所在全年查询
      yearQuery() {
        let year = new Date(this.dateRange[0]).getFullYear()
        this.dateRange = getYearDatePoint(year, 'current')
        this.queryPageData()
      },

      // 上一年查询
      preYearQuery() {
        let year = new Date(this.dateRange[0]).getFullYear()
        this.dateRange = getYearDatePoint(year, 'previous')
        this.queryPageData()
      },

      // 下一年查询
      nextYearQuery() {
        let year = new Date(this.dateRange[0]).getFullYear()
        this.dateRange = getYearDatePoint(year, 'next')
        this.queryPageData()
      },
    },
  }
</script>
<style scoped lang="scss">
  .module-name {
    cursor: pointer;
    &:hover {
      color: #3e9cca;
      font-weight: 700;
    }
  }
</style>
